<template>
	<view>
		<view class="classify">
			<view :class="[actio==index?'action':'']" @click="action(index,item.id)" style="border: 1px solid gray;" v-for="(item,index) in classify" :key="index">
				{{item.applicationCenterCatalogue}}
			</view>
		</view>
		<view class="server">
			<view v-for="(item,index) in serverlist" :key="index">
				<view>
					<image style="width: 100rpx;" :src="base+item.applicationLogo" mode="widthFix"></image>
				</view>
				<view style="text-align: center;">
					{{item.applicationLabel}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as request from '@/unitl.js'
	export default {
		data() {
			return {
				
				base:'',
				classify:"",
				actio:0,
				serverlist:[]
			}
		},
		onLoad() {
			this.base=request.default.baseurl
			this.getclassify()
			this.action(0,1)
		},
		methods: {
		   async action(index,id){
				this.actio=index
				const res =await request.default.getapplist(id)
				console.log(res)
				this.serverlist=res.data.rows
				
			},
			async getclassify(){
				const res=await request.default.getclassifylist()
				console.log(res)
				this.classify=res.data.rows
			}
		}
	}
</script>

<style>
	.server{
		margin-top: 20px;
		display: grid;
		gap: 10rpx;
		font-size: 10px;
		text-align: center;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	.action{
		background-color: blue;
	}
	.classify{
		display: grid;
		text-align: center;
background-color: bisque;
		grid-template-columns: 1fr 1fr 1fr; 
	}

</style>
